<template>
  <div>
    <p class="total my-10px ml-20px text-18px">
      共查询到 {{ total }} 条数据
      <el-tooltip
        v-if="isShow"
        trigger="hover"
        effect="light"
        placement="bottom"
      >
        <el-icon size="20px" color="#409eff" class="cursor-pointer">
          <WarningFilled />
        </el-icon>
        <template #content>
          <div class="content">
            {{ tooltipContent }}
          </div>
        </template>
      </el-tooltip>
    </p>
  </div>
</template>

<script setup lang="ts">
import { defineProps, toRefs } from 'vue'

const props = defineProps({
  total: {
    type: Number,
    default: () => 0,
  },
  tooltipContent: {
    type: String,
    default: () => '',
  },
  isShow: {
    type: Boolean,
    default: () => true,
  },
})
const { total } = toRefs(props)
</script>

<style scoped lang="scss">
.total {
  line-height: 30px;
  font-weight: bolder;
  text-align: left;
  margin-bottom: -15px;
}
.content {
  width: 200px;
  line-height: 24px;
  font-size: 16px;
}
</style>
